<template>
	<div class="home">
		<!-- <div class="home__top">
			<div class="home__top__btn" v-for='(item,index) in btnlist' :key="index" :style="{background:item.bgc}">{{item.text}}</div>
		</div> -->
		<div class="home__con" style="display: flex;">
			<div class="left" style="height: calc(100% - 28px);width: fit-content;">
				<div style="display: flex;align-items: center;justify-content: space-between;margin-bottom: 10px;">
					<div style="width: 150px;">
						<el-input v-model="input" placeholder="请输入内容"></el-input>
					</div>
					<div style="width: 150px;">
						<el-input v-model="input" placeholder="请输入内容"></el-input>
					</div>
				</div>

				<el-table border :data="tableData" stripe style="width: 100%" :height="`calc(100% - ${footerh}px)`"
					:header-cell-style='{background:"#F9F9F9",color:"#1F163A"}' :cell-style="{color:'#1F163A'}">
					<el-table-column type="index" label="行" width="50">
					</el-table-column>
					<el-table-column prop="bh" label="编号" width="100">
					</el-table-column>
					<el-table-column prop="kh" label="款号" width="150">
					</el-table-column>
				</el-table>
				<div class="footer" ref="footer">
					<el-pagination small pager-count='3' background layout="prev, pager, next,jumper" :total="328">
					</el-pagination>
				</div>
			</div>
			<div class="right" style="margin-left: 23px;width: calc(100% - 350px)">
				<div class="home__top">
					<div style="display: flex;align-items: center;">
						<div style="height: 28px;line-height: 28px;" class="home__top__btn" v-for='(item,index) in btnlist'
							:key="index">{{item.text}}</div>
					</div>

					<div style="display: flex;align-items: center;padding-right: 0;">
						<el-checkbox label="保存不提示打印"></el-checkbox>
						<div style="width: 10px;"></div>
						进度更新：
						<div style="width: 80px;margin-left: 10px;height: 36px;display: flex;align-items: center;">
							<el-input v-model="input" placeholder=""></el-input>
						</div>
						<div style="width: 10px;"></div>
						审核：
						<div style="width: 80px;margin-left: 10px;height: 36px;display: flex;align-items: center;">
							<el-input v-model="input" placeholder=""></el-input>
						</div>
						<div style="width: 10px;"></div>
						显示：
						<div style="width: 80px;margin-left: 10px;height: 36px;display: flex;align-items: center;">
							<el-select v-model="value" placeholder="">
								<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</div>
					</div>
					
				</div>
				<el-table border :data="tableData1" stripe :height="`calc(100% - ${footerh}px)`"
					:header-cell-style='{background:"#F9F9F9",color:"#1F163A"}' :cell-style="{color:'#1F163A'}">
					<el-table-column type="selection" width="76">
					</el-table-column>
					<el-table-column type="index" label="序号" width="76">
					</el-table-column>
					<el-table-column prop="gxh" label="工序号" width="209">
					</el-table-column>
					<el-table-column prop="gxh1" label="工序号">
					</el-table-column>
					<el-table-column prop="bz" label="备注">
					</el-table-column>
					<el-table-column prop="fz" label="分组" width="200">
					</el-table-column>
					<el-table-column prop="js" label="结束" width="65">
						<template slot-scope="scope">
							<el-checkbox v-model="scope.row.js"></el-checkbox>
						</template>
					</el-table-column>
					<el-table-column prop="ylgx" label="依赖工序" width="99">
						<template slot-scope="scope">
							<div class="box" :style="{background:scope.row.ylgx.c}">
								{{scope.row.ylgx.val}}
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="gj" label="工价" width="200">
					</el-table-column>
				</el-table>
				<div class="hj">
					合计：0.81
				</div>
			</div>
			<!-- <div class="footer" ref="footer">
				<div>
					显示第1到第22条记录，总共 3272 条记录
				</div>
				<el-pagination background layout="prev, pager, next,jumper" :total="328">
				</el-pagination>
			</div> -->
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				input:'',
				options: [{
					value: '选项1',
					label: '黄金糕'
				}, {
					value: '选项2',
					label: '双皮奶'
				}, {
					value: '选项3',
					label: '蚵仔煎'
				}, {
					value: '选项4',
					label: '龙须面'
				}, {
					value: '选项5',
					label: '北京烤鸭'
				}],
				value: '',
				btnlist: [{
					text: '定义列名'
				}, {
					text: '全部上传'
				}, {
					text: '全部下载'
				}, {
					text: '导入信息'
				}, {
					text: '扩展信息'
				}, {
					text: '尺码表'
				}, {
					text: '颜色表'
				}, {
					text: '结构'
				}, {
					text: '成本'
				}, {
					text: '分类'
				}, {
					text: '全部'
				}, ],
				footerh: 67,
				tableData: [{
						bh: 10101001,
						kh: '6308#K'
					},
					{
						bh: 10101001,
						kh: '6308#K'
					},
					{
						bh: 10101001,
						kh: '6308#K'
					},
					{
						bh: 10101001,
						kh: '6308#K'
					},
					{
						bh: 10101001,
						kh: '6308#K'
					},
					{
						bh: 10101001,
						kh: '6308#K'
					},
					{
						bh: 10101001,
						kh: '6308#K'
					},
					{
						bh: 10101001,
						kh: '6308#K'
					},
					{
						bh: 10101001,
						kh: '6308#K'
					},
					{
						bh: 10101001,
						kh: '6308#K'
					},
					{
						bh: 10101001,
						kh: '6308#K'
					},
					{
						bh: 10101001,
						kh: '6308#K'
					},
					{
						bh: 10101001,
						kh: '6308#K'
					},
					{
						bh: 10101001,
						kh: '6308#K'
					},
					{
						bh: 10101001,
						kh: '6308#K'
					},
					{
						bh: 10101001,
						kh: '6308#K'
					},
					{
						bh: 10101001,
						kh: '6308#K'
					},
					{
						bh: 10101001,
						kh: '6308#K'
					},
					{
						bh: 10101001,
						kh: '6308#K'
					},
					{
						bh: 10101001,
						kh: '6308#K'
					},
					{
						bh: 10101001,
						kh: '6308#K'
					},
					{
						bh: 10101001,
						kh: '6308#K'
					},
					{
						bh: 10101001,
						kh: '6308#K'
					},
					{
						bh: 10101001,
						kh: '6308#K'
					},
					{
						bh: 10101001,
						kh: '6308#K'
					},
					{
						bh: 10101001,
						kh: '6308#K'
					},
					{
						bh: 10101001,
						kh: '6308#K'
					},
					{
						bh: 10101001,
						kh: '6308#K'
					},
					{
						bh: 10101001,
						kh: '6308#K'
					},
					{
						bh: 10101001,
						kh: '6308#K'
					},
					{
						bh: 10101001,
						kh: '6308#K'
					},
					{
						bh: 10101001,
						kh: '6308#K'
					},
					{
						bh: 10101001,
						kh: '6308#K'
					},
					{
						bh: 10101001,
						kh: '6308#K'
					},
					{
						bh: 10101001,
						kh: '6308#K'
					},
					{
						bh: 10101001,
						kh: '6308#K'
					},
					{
						bh: 10101001,
						kh: '6308#K'
					},
					{
						bh: 10101001,
						kh: '6308#K'
					},
					{
						bh: 10101001,
						kh: '6308#K'
					},
					{
						bh: 10101001,
						kh: '6308#K'
					},
					{
						bh: 10101001,
						kh: '6308#K'
					},
					{
						bh: 10101001,
						kh: '6308#K'
					},
					{
						bh: 10101001,
						kh: '6308#K'
					},
				],
				tableData1: [{
					gxh: 1990,
					gxh1: '不开通权限首序',
					bz: '无',
					fz: '车间',
					js: true,
					ylgx: {
						c: '#4A77F6',
						val: 7
					},
					gj: '0.00'
				}, {
					gxh: 1990,
					gxh1: '不开通权限首序',
					bz: '无',
					fz: '车间',
					js: true,
					ylgx: {
						c: '#4A77F6',
						val: 7
					},
					gj: '0.00'
				}, {
					gxh: 1990,
					gxh1: '不开通权限首序',
					bz: '无',
					fz: '车间',
					js: true,
					ylgx: {
						c: '#4A77F6',
						val: 7
					},
					gj: '0.00'
				}, {
					gxh: 1990,
					gxh1: '不开通权限首序',
					bz: '无',
					fz: '车间',
					js: true,
					ylgx: {
						c: '#4A77F6',
						val: 7
					},
					gj: '0.00'
				}, {
					gxh: 1990,
					gxh1: '不开通权限首序',
					bz: '无',
					fz: '车间',
					js: true,
					ylgx: {
						c: '#4A77F6',
						val: 7
					},
					gj: '0.00'
				}, {
					gxh: 1990,
					gxh1: '不开通权限首序',
					bz: '无',
					fz: '车间',
					js: true,
					ylgx: {
						c: '#4A77F6',
						val: 7
					},
					gj: '0.00'
				}, {
					gxh: 1990,
					gxh1: '不开通权限首序',
					bz: '无',
					fz: '车间',
					js: true,
					ylgx: {
						c: '#4A77F6',
						val: 7
					},
					gj: '0.00'
				}, {
					gxh: 1990,
					gxh1: '不开通权限首序',
					bz: '无',
					fz: '车间',
					js: true,
					ylgx: {
						c: '#4A77F6',
						val: 7
					},
					gj: '0.00'
				}, {
					gxh: 1990,
					gxh1: '不开通权限首序',
					bz: '无',
					fz: '车间',
					js: true,
					ylgx: {
						c: '#4A77F6',
						val: 7
					},
					gj: '0.00'
				}, {
					gxh: 1990,
					gxh1: '不开通权限首序',
					bz: '无',
					fz: '车间',
					js: true,
					ylgx: {
						c: '#4A77F6',
						val: 7
					},
					gj: '0.00'
				}, {
					gxh: 1990,
					gxh1: '不开通权限首序',
					bz: '无',
					fz: '车间',
					js: true,
					ylgx: {
						c: '#4A77F6',
						val: 7
					},
					gj: '0.00'
				}, {
					gxh: 1990,
					gxh1: '不开通权限首序',
					bz: '无',
					fz: '车间',
					js: true,
					ylgx: {
						c: '#4A77F6',
						val: 7
					},
					gj: '0.00'
				}, {
					gxh: 1990,
					gxh1: '不开通权限首序',
					bz: '无',
					fz: '车间',
					js: true,
					ylgx: {
						c: '#4A77F6',
						val: 7
					},
					gj: '0.00'
				}, {
					gxh: 1990,
					gxh1: '不开通权限首序',
					bz: '无',
					fz: '车间',
					js: true,
					ylgx: {
						c: '#4A77F6',
						val: 7
					},
					gj: '0.00'
				}, {
					gxh: 1990,
					gxh1: '不开通权限首序',
					bz: '无',
					fz: '车间',
					js: true,
					ylgx: {
						c: '#4A77F6',
						val: 7
					},
					gj: '0.00'
				}, {
					gxh: 1990,
					gxh1: '不开通权限首序',
					bz: '无',
					fz: '车间',
					js: true,
					ylgx: {
						c: '#4A77F6',
						val: 7
					},
					gj: '0.00'
				}, {
					gxh: 1990,
					gxh1: '不开通权限首序',
					bz: '无',
					fz: '车间',
					js: true,
					ylgx: {
						c: '#4A77F6',
						val: 7
					},
					gj: '0.00'
				}, {
					gxh: 1990,
					gxh1: '不开通权限首序',
					bz: '无',
					fz: '车间',
					js: true,
					ylgx: {
						c: '#4A77F6',
						val: 7
					},
					gj: '0.00'
				}, {
					gxh: 1990,
					gxh1: '不开通权限首序',
					bz: '无',
					fz: '车间',
					js: true,
					ylgx: {
						c: '#4A77F6',
						val: 7
					},
					gj: '0.00'
				}, {
					gxh: 1990,
					gxh1: '不开通权限首序',
					bz: '无',
					fz: '车间',
					js: true,
					ylgx: {
						c: '#4A77F6',
						val: 7
					},
					gj: '0.00'
				}, {
					gxh: 1990,
					gxh1: '不开通权限首序',
					bz: '无',
					fz: '车间',
					js: true,
					ylgx: {
						c: '#4A77F6',
						val: 7
					},
					gj: '0.00'
				}],
			}
		},
		created() {
			// this.
		},
		mounted() {
			// this.footerh=this.$refs.footer.offsetHeight
			// console.log(this.footerh)
		},
	}
</script>
<style scoped>
	.home {
		background-color: #fff;
		height: calc(100% - 26px);
		border-radius: 5px;
		padding: 13px 10px;
	}

	.home__top {
		display: flex;
		align-items: center;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		font-size: 15px;
		color: #5E6061;
		justify-content: space-between;
	}

	.home__top__btn {
		cursor: pointer;
		padding: 0 18px;
		background-color: rgba(74, 119, 246, .5);
		color: #231918;
		font-size: 15px;
		margin-right: 1px;
	}

	.home__con {
		margin-top: 10px;
		height: calc(100%);
	}

	/deep/.el-table .cell {
		text-align: center !important;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.box {
		width: 60px;
		height: 22px;
		border-radius: 3px;
		text-align: center;
		line-height: 22px;
		color: #fff;
	}

	.footer {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		font-size: 15px;
		color: #1F163A;
		padding: 24px 0;
	}

	/* 隐藏 Chrome、Safari 和 Opera 的滚动条 */
	.el-aside::-webkit-scrollbar {
		display: none;
	}

	/* 隐藏 IE、Edge 和 Firefox 的滚动条 */
	.el-aside {
		-ms-overflow-style: none;
		/* IE and Edge */
		scrollbar-width: none;
		/* Firefox */
	}

	.hj {
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		font-size: 17px;
		color: #1F163A;
		padding: 19px 88px;

		text-align: right;
	}
</style>